<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        hand
        :elements="filterElements"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <Button style="display: inline-block;" @click="handleExport">导出</Button>
      </FilterForm>
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <!-- show-summary
      :summary-method="getSummaries"-->
      <el-table
        ref="tableref"
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8',textAlign:'center' }"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
        row-key="code"
        height="100%"
      >
        <el-table-column label="核算科室代码" prop="deptCode" width="140" />
        <el-table-column label="核算科室名称" prop="deptName" width="140" />
        <el-table-column prop="personnel" label="人员经费" width="140">
          <template slot-scope="scope">{{ scope.row.personnel | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="personnel1" label="其中: 效益工资" width="140">
          <template slot-scope="scope">{{ scope.row.personnel1 | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="sanitaryMaterials" label="卫生材料" width="140">
          <template slot-scope="scope">{{ scope.row.sanitaryMaterials | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="sanitaryMaterials1" label="其中:科研材料" width="140">
          <template slot-scope="scope">{{ scope.row.sanitaryMaterials1 | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="drug" label="药品费" width="140">
          <template slot-scope="scope">{{ scope.row.drug | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="fixed" label="固定资产折旧" width="140">
          <template slot-scope="scope">{{ scope.row.fixed | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="fixed1" label="其中:捐赠资产折旧" width="140">
          <template slot-scope="scope">{{ scope.row.fixed1 | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="intangible" label="无形资产摊销" width="140">
          <template slot-scope="scope">{{ scope.row.intangible | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="other" label="其他费用" width="140">
          <template slot-scope="scope">{{ scope.row.other | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="other1" label="其中:科研支出" width="140">
          <template slot-scope="scope">{{ scope.row.other1 | numberToCurrency }}</template>
        </el-table-column>
        <el-table-column prop="sum" label="合计" width="140">
          <template slot-scope="scope">{{ scope.row.sum | numberToCurrency }}</template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <Pagination
        :total="pageAttr.total"
        :page="pageAttr.currentPage"
        :page-size="pageAttr.pageSize"
        @pagation="pagationChange"
      />-->
    </Container>
  </ContainerGroup>
</template>

<script>
import { getDeptBaseCost, downloadJd } from '@/utils/apis/report'
export default {
  name: 'QuarterdptCost',
  components: {},
  data() {
    return {
      titleText: '',
      tableDataList: false,
      isShow: false,
      filterElements: [
        {
          key: 'yearMonth',
          label: '年/月',
          mode: 'monthrange',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: [this.$util.currentDate(), this.$util.currentDate()],
          width: 340
        }
      ],
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      tableData: [],
      tableData1: [],
      tableLoading: false,
      newParamList: {}
    }
  },
  updated() {
    if (this.$refs.tableref) {
      this.$refs.tableref.doLayout()
    }
  },
  methods: {
    handleExport() {
      // 导出
      const date = this.$refs.filterForm.getParms()?.yearMonth
      const param = {
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM')
      }
      downloadJd(param).then(res => {
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '季度科室成本表.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleCancle() {
      this.isShow = false
    },

    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (index >= 3) {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
            // sums[index] += " 元";
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    // 分页
    pagationChange(payload) {
      this.pageAttr.currentPage = payload.page
      this.pageAttr.pageSize = payload.pageSize
      this.getData(this.newParamList)
    },
    handleSearch(value) {
      this.newParamList = value
      this.pageAttr.currentPage = 1
      this.getData()
    },
    handleReset(value) {
      this.$refs.filterForm.handleForceSet({
        yearMonth: [this.$util.currentDate(), this.$util.currentDate()]
      })
      const obj = {}
      value.forEach(item => {
        obj[item.key] = item.value
      })
      this.newParamList = obj
      this.getData()
    },
    createNewData() {},
    getData() {
      // 列表
      const date = this.newParamList.yearMonth
      const param = {
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM')
      }
      this.tableLoading = true
      getDeptBaseCost(param).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data
          this.pageAttr.total = res.data.data.total
        }
        this.tableLoading = false
      })
    },
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : `0${n}`
    }
  }
}
</script>

<style lang="less" scoped>
.table-box1 {
  height: 200px;
  margin-bottom: 20px;
}

.table-box2 {
  height: 50vh;
}

.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}

.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}

.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
